<!--
 * @Author: your name
 * @Date: 2020-06-01 13:45:45
 * @LastEditTime: 2020-06-11 18:03:02
 * @LastEditors: Please set LastEditors
 * @Description: 头部
 * @FilePath: \IM_Web\im_web\src\components\header\index.vue
--> 
<template>
    <div
        class="mine_header"
        :style="{width:$store.state.Tabs===3?'100%':'',padding:$store.state.Tabs===3?'0px':''}"
    >
        <div
            class="flex align_center header_content"
            v-if="$store.state.Tabs === 1|| $store.state.Tabs===2"
        >
            <div class="flex flex_direction align_center justify_center header">
                <div class="flex align_center justify_center tabs_1" v-if="$store.state.Tabs === 1">
                    <div>企内聊</div>
                    <div class="add">
                        <AddIcon />
                    </div>
                </div>
                <div style="position: relative;width:100%;">
                    <div
                        class="search_content"
                        :class="$store.state.Tabs === 2?'flex align_center justify_around':''"
                    >
                        <Input
                            v-model="value"
                            placeholder
                            style="width: 340px;"
                            :style="{width:$store.state.Tabs === 2?'290px':''}"
                            :blur="hadleBlur()"
                            ref="search"
                        />
                        <div class="add" v-if="$store.state.Tabs === 2">
                            <AddIcon />
                        </div>
                    </div>

                    <div
                        class="search_content_prompt flex align_center justify_center"
                        @click="changeFocus()"
                        :style="{width:$store.state.Tabs === 2?'290px':''}"
                        v-show="!inputFocus"
                    >
                        <div class="search_icon"></div>
                        <div>搜索</div>
                    </div>
                </div>
            </div>
            <!-- <div class="title">阿里巴巴-马云</div> -->
        </div>
        <div class="header_content user_header" v-else>我的</div>
    </div>
</template>

<script>
import AddIcon from "../createChat/index";
export default {
    props: {},
    data() {
        return {
            value: "",
            inputFocus: false
        };
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {},
    methods: {
        changeFocus() {
            this.inputFocus = !this.inputFocus;
            this.inputFocus ? this.$refs.search.focus() : "";
        },
        hadleBlur() {
            this.inputFocus = this.value === "" ? false : true;
        }
    },
    components: { AddIcon }
};
</script>
<style>
.search_content .ivu-input {
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
}
</style>
<style scoped lang="less">
.mine_header {
    width: 360px;
    max-height: 150px;
    background: #ededed;
    padding: 34px 10px 10px;
    box-sizing: border-box;
    .user_header {
        font-size: 20px;
        height: 75px;
        line-height: 75px;
        background: #fff;
    }
    .header_content {
        width: 100%;
        text-align: center;
        .header {
            width: 100%;
            position: relative;
            .tabs_1 {
                font-size: 24px;
                margin-bottom: 30px;
                .add {
                    position: absolute;
                    right: 0px;
                }
            }
        }
        .search_content_prompt {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 7px;
            z-index: 2;
            font-size: 20px;
            color: #cccccc;
            .search_icon {
                width: 19px;
                height: 21px;
                background: url("../../assets/images/index/icon_search@2x.png");
                background-size: 100% 100%;
                margin-right: 5px;
            }
        }
    }
}
</style>
